<template>
    <div>
        <el-row>
            <el-col>
                <div>
                    <el-form :inline="true" :model="formInline" class="demo-form-inline">
                        <el-form-item label="名称">
                            <el-input v-model="formInline.name" placeholder="名称"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="Query">查询</el-button>
                            <el-button type="success" @click="AddVisible = true">新建任务</el-button>
                            <el-button type="primary" @click="Bind()">修改任务</el-button>
                            <el-button @click="StatcTrigger" type="warning">开启任务</el-button>
                            <el-button @click="suspendJob" type="warning">暂停任务</el-button>
                            <el-button type="danger" @click="AllDelete()">删除任务</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-col>
        </el-row>
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="jobName" label="作业名称" width="120"> </el-table-column>
            <el-table-column prop="jobGroup" label="分组名称" width="120"> </el-table-column>
            <el-table-column prop="cron" label="时间策略(CRON/Simple)" width="">
                <template slot-scope="scope">
                    <p
                        v-if="scope.row.yun"
                        v-html="
                            scope.row.triggerType == 'Cron'
                                ? 'Cron:' + scope.row.cron
                                : 'Simple:<br>执行间隔:' + scope.row.intervalSecond + '<br>一直执行'
                        "
                    ></p>
                    <p
                        v-else
                        v-html="
                            scope.row.triggerType == 'Cron'
                                ? 'Cron:' + scope.row.cron
                                : 'Simple:<br>执行间隔:' + scope.row.intervalSecond + '秒<br>执行' + scope.row.rumTimes + '次'
                        "
                    ></p>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="状态" width="120">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.zt == 1" type="success" plain>启用</el-button>
                    <el-button v-else-if="scope.row.zt == 0" type="danger" plain>停用</el-button>
                    <el-button v-else type="warning" plain>暂停</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="description" label="任务描述" width="120"> </el-table-column>
            <el-table-column prop="requestUrl" label="任务地址" width=""> </el-table-column>
            <el-table-column prop="endTime" label="最近一次执行时间" width="160"> </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="formInline.pageindex"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="formInline.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        >
        </el-pagination>

        <el-dialog title="添加" v-if="AddVisible" :visible.sync="AddVisible" width="40%" :before-close="handleClose">
            <el-form :model="form" :rules="rules" ref="form">
                <el-form-item prop="JobName" label="任务名称:" :label-width="formLabelWidth">
                    <el-input v-model="form.jobName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item prop="JobGroup" label="分组名称:" :label-width="formLabelWidth">
                    <el-input v-model="form.jobGroup" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="任务地址" :label-width="formLabelWidth">
                    <el-select v-model="form.requestUrl" placeholder="请选择" style="width: 100%">
                        <el-option v-for="item in JobNameList" :key="item.namespace" :label="item.namespace" :value="item.namespace">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="开始时间" :label-width="formLabelWidth">
                    <el-date-picker v-model="form.beginTime" type="datetime" placeholder="选择日期时间"> </el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间" :label-width="formLabelWidth">
                    <el-date-picker v-model="form.endTime" type="datetime" placeholder="选择日期时间" align="right"> </el-date-picker>
                </el-form-item>
                <el-form-item label="时间策略" :label-width="formLabelWidth">
                    <el-select v-model="form.triggerType" placeholder="请选择">
                        <el-option label="Cron" value="Cron"> </el-option>
                        <el-option label="Simple" value="Simple"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item v-if="form.triggerType == 'Cron'" label="Cron字符串:" :label-width="formLabelWidth">
                    <el-input v-model="form.cron" autocomplete="off"></el-input>
                    <el-link @click="Tiao" type="primary">CRON生成网址</el-link>
                </el-form-item>
                <el-form-item v-if="form.triggerType == 'Simple'" label="执行次数:" :label-width="formLabelWidth">
                    <el-input-number v-if="!form.yun" v-model="form.rumTimes" :min="1" label="运行次数"></el-input-number>
                    <el-switch v-model="form.yun" active-text="一直运行" inactive-text="按策略运行"> </el-switch>
                </el-form-item>
                <el-form-item v-if="form.triggerType == 'Simple'" label="间隔时间/秒:" :label-width="formLabelWidth">
                    <el-input v-model="form.intervalSecond" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="描述:" :label-width="formLabelWidth">
                    <el-input v-model="form.description" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="NewJobSuccess">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="修改" v-if="UpdateVisible" :visible.sync="UpdateVisible" width="40%" :before-close="handleClose">
            <el-form :model="form" :rules="rules" ref="form">
                <el-form-item prop="JobName" label="任务名称:" :label-width="formLabelWidth">
                    <el-input v-model="form.jobName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item prop="JobGroup" label="分组名称:" :label-width="formLabelWidth">
                    <el-input v-model="form.jobGroup" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="任务地址" :label-width="formLabelWidth">
                    <el-select v-model="form.requestUrl" placeholder="请选择" style="width: 100%">
                        <el-option v-for="item in JobNameList" :key="item.namespace" :label="item.namespace" :value="item.namespace">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="开始时间" :label-width="formLabelWidth">
                    <el-date-picker v-model="form.beginTime" type="datetime" placeholder="选择日期时间"> </el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间" :label-width="formLabelWidth">
                    <el-date-picker v-model="form.endTime" type="datetime" placeholder="选择日期时间" align="right"> </el-date-picker>
                </el-form-item>
                <el-form-item label="时间策略" :label-width="formLabelWidth">
                    <el-select v-model="form.triggerType" placeholder="请选择">
                        <el-option label="Cron" value="Cron"> </el-option>
                        <el-option label="Simple" value="Simple"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item v-if="form.triggerType == 'Cron'" label="Cron字符串:" :label-width="formLabelWidth">
                    <el-input v-model="form.cron" autocomplete="off"></el-input>
                    <el-link @click="Tiao" type="primary">CRON生成网址</el-link>
                </el-form-item>
                <el-form-item v-if="form.triggerType == 'Simple'" label="执行次数:" :label-width="formLabelWidth">
                    <el-input-number v-if="!form.yun" v-model="form.rumTimes" :min="1" label="运行次数"></el-input-number>
                    <el-switch v-model="form.yun" active-text="一直运行" inactive-text="按策略运行"> </el-switch>
                </el-form-item>
                <el-form-item v-if="form.triggerType == 'Simple'" label="间隔时间/秒:" :label-width="formLabelWidth">
                    <el-input v-model="form.intervalSecond" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="描述:" :label-width="formLabelWidth">
                    <el-input v-model="form.description" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="UpdateJob()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
  
  <script>
import { getTimingList, AfterTiming, AddTiming, DeleteTiming, UpdateTiming, QueryIdTiming, StartScheduleJob,PauseScheduleJob } from '../../api/timing.js';
export default {
    data() {
        return {
            formInline: {
                name: '',
                pageindex: 1,
                pagesize: 10
            },
            rules: {},
            tableData: [],
            JobNameList: [],
            formLabelWidth: '120px',
            multipleSelection: [],
            total: 0,
            AddVisible: false,
            UpdateVisible: false,
            form: {
                jobName: '',
                jobGroup: '',
                beginTime: '',
                endTime: '',
                cron: '',
                rumTimes: undefined,
                intervalSecond: undefined,
                triggerType: '',
                requestUrl: '',
                namespace: '',
                yun: true,
                description: '',
                zt: 0
            }
        };
    },
    created() {
        this.Query();
        this.After();
    },
    methods: {
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then((_) => {
                    done();
                })
                .catch((_) => {});
            this.form.jobName = '';
            this.form.jobGroup = '';
            this.form.beginTime = '';
            this.form.endTime = '';
            this.form.cron = '';
            this.form.rumTimes = undefined;
            this.form.intervalSecond = undefined;
            this.form.triggerType = '';
            this.form.requestUrl = '';
            this.form.namespace = '';
            this.form.yun = true;
            this.form.description = '';
            this.form.zt = 0;
        },
        Query() {
            getTimingList(this.formInline).then((res) => {
                console.log(res);
                this.tableData = res.data;
                this.total = res.count;
            });
        },
        Tiao() {
            window.open('https://cron.qqe2.com/', 'Cron');
        }, //跳转Cron生成器页面
        After() {
            AfterTiming().then((res) => {
                console.log(res);
                this.JobNameList = res;
            });
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        NewJobSuccess() {
            AddTiming(this.form).then((res) => {
                console.log(res);
                if (res.code == 200) {
                    this.$message.success('添加成功');
                    this.AddVisible = false;
                    this.Query();
                } else {
                    this.$message.success(res.message);
                }
            });
        },
        //分页
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.formInline.pagesize = val;
            this.Query();
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.formInline.pageindex = val;
            this.Query();
        },
        //删除（批删）
        AllDelete() {
            // 二次确认删除
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            })
                .then(() => {
                    DeleteTiming(this.multipleSelection).then((res) => {
                        console.log(res);
                        if (res.code == 200) {
                            this.$message.success('删除成功');
                            this.Query();
                        } else {
                            this.$message.success(res.message);
                        }
                    });
                })
                .catch(() => {});
        },
        //反填数据
        Bind() {
            let id = '';
            if (this.multipleSelection.length == 1) {
                this.multipleSelection.forEach((x) => {
                    id = x.id;
                });
                this.UpdateVisible = true;
            } else {
                this.$message('请选择一条数据进行修改');
            }
            console.log('111', id);
            QueryIdTiming(id).then((res) => {
                console.log(res);
                this.form = res.data;
            });
        },
        //定时任务修改数据
        UpdateJob() {
            UpdateTiming(this.form).then((res) => {
                console.log(res);
                if (res.code == 200) {
                    this.$message.success('修改成功');
                    this.UpdateVisible = false;
                    this.getData();
                } else {
                    this.$message.success(res.message);
                }
            });
        },
        //开启定时任务
        StatcTrigger() {
            let id = [];
            if (this.multipleSelection.length == 1) {
                this.multipleSelection.forEach((x) => {
                    id = x;
                });
            } else {
                this.$message('请选择一条数据进行开启任务');
            }
            StartScheduleJob(id).then((res) => {
                console.log('assas', res);
                if (res.result.code == 200) {
                    this.$message.success('开启成功');
                    this.$message.success(res.msg);
                    this.Query();
                } else {
                    this.$message.success(res.result.message);
                }
            });
        },
        //暂停定时任务
        suspendJob(){
            let id = [];
            if (this.multipleSelection.length == 1) {
                this.multipleSelection.forEach((x) => {
                    id = x;
                });
            } else {
                this.$message('请选择一条数据进行开启任务');
            }
            PauseScheduleJob(id).then((res) => {
                console.log('assas', res);
                if (res.result.code == 200) {
                    this.$message.success('开启成功');
                    this.Query();
                } else {
                    this.$message.success(res.result.message);
                }
            });
        }
    }
};
</script>